<!-- 
  方法说明：
  addEmptyRow：新增一个空行
  refreshTable：刷新表格数据，从远端读取数据更新到本地显示。
  colHeaderAlign：根据字段名返回该字段列头的对齐方式
  startEdit：开启一行的编辑模式

  属性说明：
  vari.tableData：表格的数据源
  vari.tableStyle:业务数据表在样式表 table_style 中的设置的参数的集合，一行是针对业务表一个字段的配置
  -->
<div>
    <a (click)="addEmptyRow()"><i nz-icon nzType="plus" nzTheme="outline"></i>&nbsp;新增行</a>&nbsp;
    <a (click)="refresh()"><i nz-icon nzType="sync" nzTheme="outline"></i>&nbsp;刷新</a>
    <!-- <a (click)="printTD()"><i nz-icon nzType="sync" nzTheme="outline"></i>&nbsp;打印filterOpts</a> -->
</div>&nbsp;
<nz-table #zorroTable nzBordered [nzData]="detailService.tableDataDisplay" nzSize="small" [nzPageSize]="'1000'">
    <thead>
        <tr class="strip" style="background-color: #f4f4f4;">
            <th nzWidth="60px">#</th>
            <!-- 序号列 -->
            <ng-container *ngFor="let item of detailService.tableStyle">
                <!-- <th *ngIf="!item.immutable" [nzWidth]="item.width_percent_str" [nzAlign]="detailService.colHeaderAlign(item.field_name)">
                    {{ item.text }}
                </th> -->
                <!-- 遍历样式表构建列头，不创建immutable列 -->
                <ng-container *ngIf="!item.immutable">
                    <ng-container [ngSwitch]="item.filter">
                        
                        <th *ngSwitchCase="'multiple'" [nzWidth]="item.width_percent_str" [nzAlign]="detailService.colHeaderAlign(item.field_name)" 
                            nzShowFilter [nzFilters]="detailService.filterOpts[item.field_name]" 
                            [nzFilterMultiple]="true"
                            (nzFilterChange)="filter($event, item.field_name)">
                            {{ item.text }}
                        </th>

                        <th *ngSwitchCase="'single'" [nzWidth]="item.width_percent_str" [nzAlign]="detailService.colHeaderAlign(item.field_name)" 
                            nzShowFilter [nzFilters]="detailService.filterOpts[item.field_name]" 
                            [nzFilterMultiple]="false"
                            (nzFilterChange)="filter($event, item.field_name)">
                            {{ item.text }}
                        </th>

                        <th *ngSwitchDefault [nzWidth]="item.width_percent_str" [nzAlign]="detailService.colHeaderAlign(item.field_name)">
                            {{ item.text }}
                        </th>

                    </ng-container>

                    <!-- <th *ngIf="item.filter;else noFilter" 
                        [nzWidth]="item.width_percent_str" [nzAlign]="detailService.colHeaderAlign(item.field_name)" 
                        nzShowFilter [nzFilters]="detailService.filterOpts[item.field_name]" (nzFilterChange)="filter($event, item.field_name)">
                        {{ item.text }}
                    </th>
                    <ng-template #noFilter>
                        <th [nzWidth]="item.width_percent_str" [nzAlign]="detailService.colHeaderAlign(item.field_name)">
                            {{ item.text }}
                        </th>
                    </ng-template> -->

                </ng-container>
            </ng-container>
        </tr>
    </thead>

    <tbody>
        <!-- 
        class.strip 是斑马纹，将下面的样式代码拷贝到css文件中
        /* 表格组件斑马纹 */
        .strip{
            background-color: #eff4f9;
        }
      -->
        <tr *ngFor="let rowData of zorroTable.data;let rowIndex=index" 
            (dblclick)="startEdit(rowIndex,rowData['uuid'],$event)" 
            (mouseover)="mouseOver(mouseOverUUID = rowData.uuid)" [class.strip]="rowIndex%2 !== 0"
            [class.delLine]=" rowData.state === 0 ">
            <td>
                <!-- 序号 + 图标列 -->
                <!-- 序号列 - 显示状态下的两个图标：删除、复制 -->
                <div *ngIf="!detailService.editCache[rowData['uuid']].edit;else editIconTpl">
                    <div *ngIf="rowData.uuid === mouseOverUUID;else rowIndexTpl" nz-row nzType="flex" nzJustify="space-between">
                        <div nz-col nzSpan="10">
                            <a *ngIf="rowData['state']===1;else deletedRowTmpl" nz-popconfirm nzPopconfirmTitle="您确定要删除当前行?" (nzOnConfirm)="deleteRow(rowIndex,rowData['uuid'])" (nzOnCancel)="cancelDeleteRow()" nzPopconfirmPlacement="top"><i nz-icon nzType="close" nzTheme="outline"></i></a>
                            <ng-template #deletedRowTmpl>
                                <a nz-popconfirm nzPopconfirmTitle="您确定要恢复当前行?" (nzOnConfirm)="restoreDeleted(rowIndex,rowData['uuid'])" (nzOnCancel)="cancelDeleteRow()" nzPopconfirmPlacement="top"><i nz-icon nzType="sync" nzTheme="outline"></i></a>
                            </ng-template>
                        </div>

                        <div nz-col nzSpan="10">
                            <a (click)="detailService.copyRow(rowIndex,rowData['uuid'])"><i nz-icon nzType="copy" nzTheme="outline"></i></a>
                            <!-- 由于空间有限只能放两个图标，一开始是：删除、编辑，后来修改为：删除、复制，通过双击行开启编辑状态 -->
                            <!-- <a (click)="startEdit(rowIndex,rowData['uuid'])"><i nz-icon nzType="edit" nzTheme="outline"></i></a> -->
                        </div>
                    </div>
                    <ng-template #rowIndexTpl>{{rowIndex+1}}</ng-template>
                </div>

                <!-- 序号列 - 编辑状态下的两个图标：取消、保存 -->
                <ng-template #editIconTpl>
                    <div nz-row nzType="flex" nzJustify="space-between">
                        <div nz-col nzSpan="10">
                            <!-- 取消编辑 nz-tooltip nzTooltipTitle="取消编辑" -->
                            <a (click)="cancelEdit(rowIndex,rowData['uuid'])"><i nz-icon nzType="redo" nzTheme="outline"></i></a>
                        </div>


                        <div nz-col nzSpan="10">
                            <!-- 保存 nz-tooltip nzTooltipTitle="保存" -->
                            <a (click)="saveEdit(rowIndex,rowData['uuid'])"><i nz-icon nzType="save" nzTheme="outline"></i></a>
                        </div>
                    </div>
                </ng-template>
            </td>

            <!-- 序号之后的所有数据列 -->
            <ng-container *ngFor="let tsRow of detailService.tableStyle">
                <td *ngIf="!tsRow.immutable" [nzAlign]="detailService.colContentAlign(tsRow.field_name)">
                    <!-- 显示模式 -->
                    <ng-container *ngIf="!detailService.editCache[rowData['uuid']].edit;else editTpl">

                        <!-- <ng-container *ngIf="tsRow.date_pipe;else plainShowTpl">
                            {{ rowData[tsRow.field_name] | date:tsRow.date_formatter }}
                        </ng-container>
                        <ng-template #plainShowTpl>
                            <span *ngIf="tsRow.display_field;else replaceBlock" >
                                {{ rowData[tsRow.display_field] }}
                            </span>
                            <ng-template #replaceBlock>
                                {{ rowData[tsRow.field_name] }}
                            </ng-template>
                        </ng-template> -->


                        <span [ngSwitch]="tsRow.use_formatter">
                            <div *ngSwitchCase="'date'">
                                {{ rowData[tsRow.field_name] | date:tsRow.date_formatter }}
                            </div>

                            <div *ngSwitchCase="'digit'">
                                {{ rowData[tsRow.field_name] | number:tsRow.digit_formatter }}
                            </div>

                            <div *ngSwitchCase="'field'">
                                {{ rowData[tsRow.display_field] }}
                            </div>

                            <div *ngSwitchDefault>
                                {{ rowData[tsRow.field_name] }}
                            </div>
                        </span>

                    </ng-container>

                    <ng-template #editTpl>
                        <!-- 编辑模式，使用 switch 枚举用于编辑的控件类型 -->

                        <span [ngSwitch]="tsRow.ctl_type">
                            <p *ngSwitchCase="'optsEnum'"><!-- 键值对类型的枚举 - 已弃用 -->
                                <span *ngIf="tsRow.field_name === 'colpay';else otherOptsEnumBlock">
                                    <nz-select nzShowSearch nzPlaceHolder="" [(ngModel)]="detailService.editCache[rowData.uuid].data[tsRow.field_name]" style="width: 100%;"
                                        (ngModelChange)="onChange_category($event)">
                                        <nz-option *ngFor="let item of detailService.enums[tsRow.field_name]" [nzLabel]="item.label" [nzValue]="item.value"></nz-option>
                                    </nz-select>
                                </span>

                                <ng-template #otherOptsEnumBlock>
                                    <nz-select nzShowSearch nzPlaceHolder="" [(ngModel)]="detailService.editCache[rowData.uuid].data[tsRow.field_name]" style="width: 100%;">
                                        <nz-option *ngFor="let item of detailService.enums[tsRow.field_name]" [nzLabel]="item.label" [nzValue]="item.value"></nz-option>
                                    </nz-select>
                                </ng-template>
                            </p>

                            <p *ngSwitchCase="'date'">
                                <!-- 日期控件  [nzFormat]="'yyyy-MM-dd HH:mm:ss'" -->
                                <nz-date-picker [nzFormat]="'yyyy-MM-dd'" [(ngModel)]="detailService.editCache[rowData.uuid].data[tsRow.field_name]"></nz-date-picker>
                            </p>

                            <p *ngSwitchCase="'enum'">
                                <nz-select nzPlaceHolder="" [(ngModel)]="detailService.editCache[rowData.uuid].data[tsRow.field_name]" style="width: 100%;"
                                    (ngModelChange)="onChange_enum($event,tsRow.field_name)">
                                    <nz-option *ngFor="let item of detailService.enums[tsRow.field_name]" [nzLabel]="item.label" [nzValue]="item.value"></nz-option>
                                </nz-select>
                            </p>

                            <p *ngSwitchCase="'input'">
                                <input type="text" nz-input [(ngModel)]="detailService.editCache[rowData.uuid].data[tsRow.field_name]" (ngModelChange)="inputChange(detailService.editCache[rowData.uuid].data,tsRow)" />
                            </p>

                            <p *ngSwitchCase="'locked'">
                                <!-- 被锁定 -->
                                <!-- {{ detailService.editCache[rowData.uuid].data[tsRow.field_name] }} -->
                                <!-- {{ resolveFormula(rowData,tsRow) }} -->
                                {{ breadField.showLocked(rowData,tsRow) }}
                            </p>

                            <p *ngSwitchDefault>
                                <!-- 默认 input，这里一般手动制作下拉多选或者下拉单选，数据源为请求远端获取，在表 table_style.ctl_type 中填写：custome -->

                                <nz-select *ngIf="tsRow.field_name == 'category'" style="width: 100%;" nzShowSearch nzPlaceHolder="" [(ngModel)]="detailService.editCache[rowData.uuid].data['category']">
                                    <nz-option *ngFor="let option of detailService.cashType" [nzLabel]="option.sid" [nzValue]="option.sid"></nz-option>
                                </nz-select>

                                <nz-select *ngIf="tsRow.field_name == 'company_sid'" style="width: 100%;" nzShowSearch nzPlaceHolder="" [(ngModel)]="detailService.editCache[rowData.uuid].data['company_sid']">
                                    <nz-option *ngFor="let option of detailService.cc" [nzLabel]="option.company_name" [nzValue]="option.sid"></nz-option>
                                </nz-select>

                            </p>

                        </span>

                    </ng-template>

                </td>
            </ng-container>

        </tr>

        <!-- 统计 -->
        <tr>
        <td>合计：</td>
        <ng-container *ngFor="let tsRow of detailService.tableStyle">
          <td *ngIf="!tsRow.immutable" [nzAlign]="'right'">
            <ng-container *ngIf="tsRow.statistics;else elseBlock">
              {{ detailService.statistics[tsRow.field_name]?.label }}
            </ng-container>
            <ng-template #elseBlock></ng-template>
          </td>
        </ng-container>
        
      </tr>
    </tbody>

</nz-table>


<p-toast [style]="{marginTop: '80px'}" styleClass="primeng-custom-toast" key="custom" position="top-right"></p-toast>